.CreatePage {
    &>.canvas-container {
        // background-color: lightcoral;
        position: absolute !important;
        top: 70px;
        left: 240px;
    }

    .ShowPage_Main .canvas-container {
        // background-color: lightslategrey;
    }


    .select_drag_char_dialog {

        // display: none;
        position: absolute;
        // background-color: #C01919;
        border: 1px #C01919 solid;

        // width: 400px;
        height: 102px;
        left: 240px;
        top: 70px;
        // transform: translate(-50%, -50%);
        z-index: 10000;

        display: flex;

        .sub_img_list {
            // width:800px;
            height: 100px;

            // background-color: #F7F0DD;
            // border: 1px orangered solid;


            // display: block;

            display: flex;

            .free_side_each {
                width: 100px;
                height: 100px;
                background-color: black;

                display: flex;

                // border: 1px #C01919 solid;
                margin-left: 1px;

                img {
                    width: 100px;
                    height: 100px;
                }


            }

            .free_side_each:first-child {
                margin-left: 0px;
            }

        }

        .select_drag_char_dialog_close {
            width: 40px;
            height: 100%;
            // background-color: orange;
            // border: 1px #C01919 solid;
            background-color: white;

            display: flex;
            justify-content: center;
            align-items: center;
        }

    }

    .ShowPage_Side.no_side_main {

        width: 130px;
        max-width: 130px;

        &>.ShowPage_Side_Main {
            display: none;
        }

        &.toggle_hide {
            left: -216px;
        }

        &.toggle_show {
            left: -116px;
        }
    }


    .ShowPage_Side_Main {
        overflow: inherit;
    }


    .bg_select_dialog {
        position: absolute;
        background-color: #F9F3E2;
        border: 1px orangered solid;

        width: 1500px;
        height: 140px;
        padding: 10px 0px;

        left: 58.4%;
        bottom: 10px;
        transform: translate(-50%);
        z-index: 10000;

        display: flex;
        flex-direction: column;

        .bg_select_line {
            flex: 1;
            display: flex;
            // background-color: lightgray;

            justify-content: center;
            align-items: center;


            .bg_select_title {
                display: block;
                width: 140px;
                // background-color: indigo;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                text-align: justify;
                text-align: justify;
                text-justify: distribute-all-lines;
                text-align-last: justify;
                padding: 0px 30px;
                cursor: pointer;
            }

            .bg_select_content {
                flex-grow: 1;
                flex-direction: row;

                .bg_select_each {
                    display: flex;
                    padding: 10px;
                    background-color: #FCF7EC;
                    margin-right: 10px;
                    min-width: 120px;
                    justify-content: center;
                    float: left;
                    cursor: pointer;
                    border: 1px #C01919 solid;
                    cursor: pointer;
                    font-size: 17px;

                    &:hover,
                    &.active {
                        background-color: #C01919;
                        color: white;
                        cursor: pointer;
                    }
                }

            }
        }



    }


}

.show_canvas_img_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;



    .show_canvas_img_link {
        position: relative;

        .ant-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: lightslategrey;
        }
    }






    .right_from {
        display: flex;
        width: 400px;
        margin-left: 15px;
        flex-direction: column;

        &>* {
            margin-top: 10px;
        }
    }

}

.img_for_show_create_img {
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    background-image: none;
    background-color: lightsteelblue;
}